<template>
	<view>
		<view class="footer">
			<view class="footer-item" @click="changepage(index,tar.pagePath)" v-for="(tar,index) in tarList" v:key="index">
				<view v-if="index == 2" class="footer-item-icon footer-item-icondef">
					<image :src="barIndex == index?tar.iconPath:tar.iconPath" mode="widthFix"></image>
				</view>
				<view v-else class="footer-item-icon">
					<image :src="barIndex == index?tar.selectedIconPath:tar.iconPath" mode="widthFix"></image>
				</view>
				<text class="footer-item-Text" :class="barIndex == index?'footer-item-TextShow':''">{{tar.text}}</text>
			</view>
		</view>	
	</view>
</template>

<script>
	export default{
		data(){
			return{
				barIndex:0,
				tarList:[
					{
						pagePath: '/pages/index/index',
						iconPath: '../../static/ic_tabbar_home.png',
						selectedIconPath: '../../static/ic_tabbar_home_h.png',
						text: '首页',
					},
					{
						pagePath: '/pages/keshi/keshi',
						iconPath: '../../static/ic_tabbar_keshi.png',
						selectedIconPath: '../../static/ic_tabbar_keshi_h.png',
						text: '科室'
					},
					{
						pagePath: '/pages/yuyue/yuyue',
						iconPath: '../../static/ic_tabbar_menzhen.png',
						selectedIconPath: '',
						text: '预约'
					},
					{
						pagePath: '/pages/zixun/zixun',
						iconPath: '../../static/ic_tabbar_news.png',
						selectedIconPath: '../../static/ic_tabbar_news_h.png',
						text: '资讯'
					},
					{
						pagePath: '/pages/person/person',
						iconPath: '../../static/ic_tabbar_my.png',
						selectedIconPath: '../../static/ic_tabbar_my_h.png',
						text: '我的'
					},
					
				]
			}
		},
		props:['selected'],
		created() {
			this.barIndex = this.selected
			// console.log(this.barIndex)
		},
		methods:{
			changepage(i,url){
				this.barIndex = i
				// console.log(url)
				uni.reLaunch({
					url: url
				});
			}
		}
	}
</script>

<style>
	.footer{
		width: 100%;
		padding: 10rpx 0;
		border-top: 2rpx solid #EBEDF0;
		/* height: 100rpx; */
		position: fixed;
		bottom: 0;
		left: 0;
		opacity: 1;
		background: #ffffff;
		box-shadow: 0rpx 0rpx 0rpx 0rpx #e5e5e5;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.footer-item{
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.footer-item-icon{
		width: 48rpx;
		height: 48rpx;
	}
	.footer-item-icondef{
		width: 96rpx;
		height: 96rpx;
		margin-top: -60rpx;
	}
	.footer-item-icon image{
		width: 100%;
		height: 100%;
	}
	.footer-item-Text{
		font-size: 20rpx;
		font-weight: 400;
		color: #7d8799;
		/* margin-top: 10rpx; */
	}
	.footer-item-TextShow{
		color: #6D71F9;
	}
</style>
